<template>
	<view class="accounts">
		<view class="nav d_f j_c_c a_i_c">
			<view class="text">USDT-TRC20</view>
			<image src="../../static/ct_0022_返回键深色.png" mode="" class="right" @tap="back"></image>
		</view>
		<view class="box">
			<view class="input d_f a_i_c">
				<view class="address">send address|</view>
				<u-input v-model="data.wallet.rule_url" class="m_l_10"  :border="false" placeholder="" :disabled="true" />
				<!-- <view class="m_l_10">{{data.wallet.rule_url}}</view> -->
			</view>
			<view class="input d_f a_i_c top">
				<u-input v-model="form.wallet"  :border="false" placeholder="Your address"  />
				<view class="code d_f j_c_c a_i_c" @tap="useLocal">
					Scan Code
				</view>
			</view>
			<view class="d_f a_i_c j_c_s_b">
				<view class="accounts_top d_f f_d_c a_i_c">
					<view class="f_w_700">transfer amount</view>
					<view class="border">
					<u-input v-model="form.money" input-align="center"  :border="false" placeholder="" @input='change' />	
					</view>
				</view>
				<image src="../../static/ct_0023_绿色按钮.png" mode="" class="show"></image>
				<view class="accounts_top d_f f_d_c a_i_c">
					<view class="f_w_700">fee:{{data.extract_rate}}%</view>
					<view class="border d_f j_c_c a_i_c">{{form.commission}}</view>
				</view>
			</view>
			<view class="d_f j_c_s_b a_i_c m_t_16">
				<view>Transgers time in：{{data.withdraw.ws_time}} - {{data.withdraw.we_time}} (next day)</view>
				<view @tap="all" class="d_f j_c_c a_i_c all">All</view>
			</view>
			<view class="remarks">
				<view class="remarks_size">Remark</view>
				<u-input v-model="form.remark" :border="false" type="textarea"  placeholder="Please enter" />
			</view>
			<view class="tips m_t_16">
				If TRX is frozen to obtain broadband resources,energy resources and free broadband resources willbe
				consumed,and a small amount of TRX will beconsumed to complete the transaction
			</view>
			<view class="tips m_t_16">
				In order to ensure your smooth transfer, it isrecommended
			</view>
			<view class="tips">
				that you reserve enough TRX on the address toquickly replenish small amount of TRX through theenergy
				station
			</view>
		</view>
		<view class="button d_f j_c_c a_i_c" @tap="transfer">Transfer Accounts</view>
	</view>
</template>

<script>
	let Qrcode = require('../../utils/reqrcode.js')
	export default {
		data() {
			return {
				address: null,
				data: {
					extract_rate: '',
					wallet: {
						rule_url: '',
					}
				},
				form:{
					wallet:'',
					money:'',
					remark:'',
					commission:0,
				},
				cameraId:'',
				devices:[],
				html5Qrcode:null,
			}
		},
		components: {

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getData() {
				this.$api.walletinfo().then(res => {
					this.data = res.data
				})
			},
			//扫码
			useLocal() {
				let _this=this
				uni.chooseImage({
					count: 1,
					success: imgRes => {
						Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
						Qrcode.qrcode.callback = (codeRes) => {
							if (codeRes.indexOf('error') >= 0) {
								
								_this.tips('Illegal QR code')
							} else {
								// 二维码识别成功
								let r = this.decodeStr(codeRes)
								_this.form.wallet = r
								console.log(r,_this.form,'rrr');
							}
						}
					}
				})
			},
			// 获取文件地址函数
			getObjectURL(file) {
				var url = null
				if (window.createObjectURL !== undefined) { // basic
					url = window.createObjectURL(file)
				} else if (window.URL !== undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file)
				} else if (window.webkitURL !== undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file)
				}
				return url
			},
			// 解码，输出：中文
			decodeStr(str) {
				var out, i, len, c;
				var char2, char3;
				out = "";
				len = str.length;
				i = 0;
				while (i < len) {
					c = str.charCodeAt(i++);
					switch (c >> 4) {
						case 0:
						case 1:
						case 2:
						case 3:
						case 4:
						case 5:
						case 6:
						case 7:
							// 0xxxxxxx
							out += str.charAt(i - 1);
							break;
						case 12:
						case 13:
							// 110x xxxx 10xx xxxx
							char2 = str.charCodeAt(i++);
							out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
							break;
						case 14:
							// 1110 xxxx 10xx xxxx 10xx xxxx
							char2 = str.charCodeAt(i++);
							char3 = str.charCodeAt(i++);
							out += String.fromCharCode(((c & 0x0F) << 12) |
								((char2 & 0x3F) << 6) |
								((char3 & 0x3F) << 0));
							break;
					}
				}
				return out;
			},
			//全转
			all(){
				 this.form.money=this.data.balance
				 this.change()
			},
			transfer(){
				if(!this.form.wallet){
					this.tips('Shipping address')
					return
				}if(!this.form.money||this.form.money<=0){
					this.tips('Please fill in the transfer amount')
					return
				}if(!this.form.money>this.data.balance){
					this.tips('Sorry, your credit is running low')
					return
				}
				this.$api.postTransfer(this.form).then(res=>{
					uni.showToast({
						title: 'Transfer successful',
						icon:'none',
						duration: 2000,
						success:res=>{
							uni.navigateBack({
								delta: 1
							});
						}
					});
				})
			},
			tips(title){
				uni.showToast({
					title: title,
					icon:'none',
					duration: 2000
				});
			},
			change(){
			  this.form.commission=(Number(this.form.money)*(this.data.extract_rate/100)).toFixed(2)
			}
		},
		onShow() {

		},
		onLoad(options) {
			this.getData()
		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.accounts {
		width: 100%;
		min-height: 100%;
		background: rgb(239, 237, 238);
         padding-bottom: 32rpx;
		.nav {
			width: calc(100% - 64rpx);
			height: 160rpx;
			margin-left: 32rpx;
			position: relative;

			.text {
				font-size: 32rpx;
				font-weight: 700;
			}

			.right {
				width: 20rpx;
				height: 32rpx;
				position: absolute;
				left: 0rpx;
				z-index: 999;
				transform: rotate(180deg);
			}
		}

		.box {
			width: calc(100% - 64rpx);
			border-radius: 20rpx;
			background: #FFFFFF;
			margin-left: 32rpx;
			padding: 32rpx;
			margin-top: 32rpx;

			.input {
				width: 100%;
				height: 80rpx;
				border: 1rpx solid #ccc;
				border-radius: 20rpx;
				padding: 0rpx 20rpx;

				.code {
					width: 200rpx;
					height: 50rpx;
					background: rgb(101, 186, 144);
					font-size: 28rpx;
					color: #fff;
					border-radius: 10rpx;
					margin-left: 20rpx;
				}
			}

			.top {
				margin-top: 32rpx;
			}

			.accounts_top {
				margin-top: 40rpx;

				.border {
					width: 200rpx;
					height: 80rpx;
					border: 1rpx solid #ccc;
					border-radius: 20rpx;
					padding: 0rpx 20rpx;
					margin-top: 10rpx;
				}
			}

			.show {
				width: 85rpx;
				height: 39rpx;
				margin-top: 80rpx;
			}
            .all{
				width: 100rpx;
				height: 60rpx;
				background: rgb(101, 186, 144);
				border-radius: 10rpx;
				color: #fff;
			}
			.remarks {
				width: 100%;
				height: 400rpx;
				border: 1rpx solid #ccc;
				border-radius: 20rpx;
				padding: 20rpx 20rpx;
				margin-top: 64rpx;

				.remarks_size {
					font-family: 700;
				}
			}

			.tips {
				font-size: 24rpx;
				font-family: 700;
				color: #000;
			}
		}
		.button {
			margin-top: 32rpx;
			width: calc(100% - 64rpx);
			height: 100rpx;
			background: rgb(101, 186, 144);
			border-radius: 20rpx;
			color: #fff;
			font-weight: 700;
			margin-left: 32rpx;
		}
	}
</style>
